<template>
  <div class="msg-nav">
    <div></div>
    <div class="title">消息</div>
    <div class="button-wrapper">
      <van-space size="16px">
        <img src="@/assets/msg/icon-select.svg" @click="toggleSelectMode()" />
        <img src="@/assets/msg/icon-creat.svg" @click="toMsgSend()"/>
      </van-space>
    </div>
    <div class="bottom-slot"><slot /></div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

defineOptions({
  name: 'MsgNav'
})

// 父组件传参
interface IProps {
  selectMode: boolean
}
const props = withDefaults(defineProps<IProps>(), {
  selectMode: false
})

const emit = defineEmits(['switch'])

const toggleSelectMode = () => {
  const selectMode = !props.selectMode
  emit('switch', selectMode)
}

// 打开新建消息页面
const router = useRouter()
const toMsgSend = () => {
  router.push('/msgSend')
}
</script>

<style lang="less">
.msg-nav {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 16px;
  height: 151px;
  background: #0027e9 url('@/assets/background.png');
  background-size: cover;
  color: #fff;

  > div:nth-child(1),
  > div:nth-child(2),
  > div:nth-child(3) {
    flex: 1;
  }

  .button-wrapper {
    width: 109px;
    text-align: right;
    img {
      width: 23.08px;
      height: 23.08px;
    }
  }

  .title {
    font-size: 19.23px;
    text-align: center;
  }

  .bottom-slot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>
